<template>
    <div class="comment">
        <h3>评论{{id}}</h3>
        <textarea name="content" maxlength="150" placeholder="在这里写出你的评论" v-model="content"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <hr>
        <div class="comment-list" v-for="(item,index) in commentList" :key="index">
            <p class="title">
                <span>第{{index +1 }}楼&nbsp;&nbsp;用户:{{item.user_name}}</span>
                <span>发布时间：{{item.add_time | dataFormat()}}</span>
             </p>
             <p class="content">{{item.content=='undefined'?'该用户很懒，什么也没说':item.content}}</p>
        </div>
          
     <mt-button type="danger" size="large" plain @click="getMore">查看更多</mt-button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui'; 
export default {
    data(){
        return {
            id:this.newsid,
            pageindex:1,
            commentList:[],// 存放评论列表信息的
            content:''
        }
    },
    created(){
        this.getComment();
    },
    methods:{
        getComment(){//获取评论的列表
            this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageindex).then(response =>{
                if(response.body.status===0){
                    // 成功
                    // console.log(response);
                    this.commentList =this.commentList.concat(response.body.message); 
                }else{
                    // 失败
                    alert("hahah")
                }
            })
        },
        getMore(){
        this.pageindex++;
        this.getComment();   
        },
        postComment(){
            // alert("aa")
            if(this.content==''){
              return Toast("内容不能为空");
            }else{
                this.$http.post('api/postcomment/'+this.id,{content:this.content}).then(response =>{
                    if(response.body.status ===0){
                        // alert("提交成功")
                        // this.getComment();
                        var obj = {
                            "add_time":new Date(),
                            "content":this.content,
                            "user_name":"匿名用户"
                        }
                        this.commentList.unshift(obj);
                    }else{
                        console.log(response);
                    }
                })
            }

        }

    },
    props:['newsid']
    
}
</script>
<style lang="scss" scoped>
    .comment{
        .comment-list .title{
            background: #ccc;
            line-height: 30px;
            display: flex; 
            justify-content:space-between;
            color: #000;
            padding: 0 10px;
        }
        .comment-list .content{
            color:brown;
        }
    }
</style>
